<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据绑定</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>

	
	<!-- 
		Vue中有2种数据绑定的方式:
			1.单向绑定(v-bind):数据只能从data流向页面。
			2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data.
		备注:
			1.双向绑定一般都应用在表单类元素上(如:input、select等)
			2.v-model:value可以简写为v-model，因为v-model默认收集的就是value值。
	 -->

	<body>
		<div id="root">
			<!-- 普通写法 -->
			<!--
			单向数据绑定<input type="text" v-bind:value="name"></input><br />
			双向数据绑定<input type="text" v-model:value="name"></input>
			 -->

			<!--简写-->
			单向数据绑定<input type="text" :value="name" /> <br />
			双向数据绑定<input type="text" v-model="name" />
			<!--如下代码是错误的，因为v-model只能应用在表单类元素(输入类元素，简单说它有value才行)上
			    为什么只有value才行?-->
			<!-- <h2 v-model:x="name">你好啊</h2> -->
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#root',
			data: {
				name: "尚硅谷"
			}
		})
	</script>
</html>